<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>某个角色对应的权限</title>
    <style type="text/css">
        .lxb-row {
            display: flex;
            align-items: center;
            justify-content: space-around;
        }

        .layui-table-header > .layui-table tr th[data-field=id] {
            display: none;
        }
    </style>
</head>
<body>
<div class="lxb-row">
    <div>
        <fieldset class="layui-elem-field layui-field-title" style="margin: 0px;">
            <legend>角色已拥有权限</legend>
        </fieldset>
        <table class="layui-table" id="ownAuthTable" lay-filter="ownAuthTable">
            <thead>
            <tr>
                <th lay-data="{type: 'numbers', fixed: true}"></th>
                <th lay-data="{type: 'checkbox', fixed: true}"></th>
                <th lay-data="{field: 'id', type:'space', width: '0%', style: 'display: none'}"></th>
                <th lay-data="{field:'name', width: 100}">权限名称</th>
                <th lay-data="{field:'authKey', width: 130}">权限KEY</th>
                <th lay-data="{field:'description', width: 150}">权限描述</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="auth : ${ownAuthes}">
                <td></td>
                <td></td>
                <td>[[${auth.id}]]</td>
                <td>[[${auth.name}]]</td>
                <td>[[${auth.authKey}]]</td>
                <td>[[${auth.description}]]</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div style="width: 100px">
        <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%;">
            <button type="button" class="btn btn-outline-secondary" onclick="rightMove();">
                <i class="layui-icon">&#xe602;</i>
            </button>
            <button type="button" class="btn btn-outline-secondary" onclick="leftMove();">
                <i class="layui-icon">&#xe603;</i>
            </button>
        </div>
    </div>
    <div>
        <fieldset class="layui-elem-field layui-field-title" style="margin: 0px;">
            <legend>其他权限</legend>
        </fieldset>
        <table class="layui-table" id="notOwnAuthTable" lay-filter="notOwnAuthTable">
            <thead>
            <tr>
                <th lay-data="{type: 'numbers', fixed: true}"></th>
                <th lay-data="{type: 'checkbox', fixed: true}"></th>
                <th lay-data="{field: 'id', type:'space', width: '0%', style: 'display: none'}"></th>
                <th lay-data="{field:'name', width: 100}">权限名称</th>
                <th lay-data="{field:'authKey', width: 130}">权限KEY</th>
                <th lay-data="{field:'description', width: 150}">权限描述</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="auth : ${notOwnAuthes}">
                <td></td>
                <td></td>
                <td>[[${auth.id}]]</td>
                <td>[[${auth.name}]]</td>
                <td>[[${auth.authKey}]]</td>
                <td>[[${auth.description}]]</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<script type="text/javascript">
    //转换静态表格
    layui.table.init('ownAuthTable', {
        height: 400
        , width: 450
    });
    layui.table.init('notOwnAuthTable', {
        height: 400
        , width: 450
    });

    /**
     * 为角色添加其他角权限
     */
    function leftMove() {
        var checkStatus = layui.table.checkStatus('notOwnAuthTable'); //test即为基础参数id对应的值
        console.log('leftMove', checkStatus.data) // 获取选中行的数据
        if (checkStatus.data.length == 0) {
            layui.layer.msg("您还没选择添加的权限");
            return;
        }
        var authIds = checkStatus.data.map(function (auth) {
            return auth.id;
        });

        $.post("/admin/roles/" + selectedRole.id + "/addAuthes", {
            'authId': authIds
        }, function (data, textStatus, req) {
            console.log("data = ", data);
            if (data.result == 1) {
                layui.table.reload('notOwnAuthTable', {
                    'data': data.notOwnAuthes
                });
                layui.table.reload('ownAuthTable', {
                    'data': data.ownAuthes
                });
            }
        });
    }

    /**
     * 为角色删除已有的权限
     */
    function rightMove() {
        var checkStatus = layui.table.checkStatus('ownAuthTable'); //test即为基础参数id对应的值
        console.log('rightMove', checkStatus.data) // 获取选中行的数据
        if (checkStatus.data.length == 0) {
            layui.layer.msg("您还没选择要删除的权限");
            return;
        }
        var authIds = checkStatus.data.map(function (auth) {
            return auth.id;
        });


        $.ajax("/admin/roles/" + selectedRole.id + "/authes", {
            type: 'post',
            data: {
                'authId': authIds,
                '_method': 'delete'
            },
            dataType: "json", // 预期服务器返回的数据类型
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                layui.layer.msg('删除出错了');
            },
            success: function (data, textStatus, jqXHR) {
                console.log("data = ", data);
                if (data.result == 1) {
                    layui.table.reload('notOwnAuthTable', {
                        'data': data.notOwnAuthes
                    });
                    layui.table.reload('ownAuthTable', {
                        'data': data.ownAuthes
                    });
                } else {
                    layui.layer.msg(data.msg);
                }
            }
        });
    }
</script>
</body>
</html>